import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Demo } from './demo.js';

import { Content, Card, Switch } from 'react-fule-ui';

export default function FuleContent(props) {
  const [checkedValue, setCheckedValue] = useState(false);
  const getData = () => {
    setCheckedValue(!checkedValue);
  };
  return (
    <Content>
      <Content.Header>右部容器Content</Content.Header>
      <Content.Body full={checkedValue}>
        <Card>
          <Card.Body>
            <Switch
              label={checkedValue ? '平铺' : '默认'}
              onChange={getData}
              style={{ marginBottom: 20 }}
            />
            <ReactMarkdown
              children={Demo}
              components={{
                code({ node, inline, className, children, ...props }) {
                  const match = /language-(\w+)/.exec(className || '');
                  return !inline && match ? (
                    <SyntaxHighlighter
                      children={String(children).replace(/\n$/, '')}
                      style={vscDarkPlus}
                      language={match[1]}
                      PreTag="div"
                      className="fl-syntaxHighlighter--div"
                      {...props}
                    />
                  ) : (
                    <code className={className} {...props}>
                      {children}
                    </code>
                  );
                },
              }}
            />
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
